<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/static/common/inner-header.jspf"%>
<title>角色管理</title>
<link href="<%=request.getContextPath()%>/static/sys/user-manager/css/userList.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-left: 3px;
	margin-top: 0px;
	margin-right: 3px;
	margin-bottom: 0px;
}
.STYLE1 {
	color: #e1e2e3;
	font-size: 12px;
}
.STYLE6 {color: #000000; font-size: 15px; }
.STYLE10 {color: #000000; font-size: 17px; }
.STYLE19 {
	color: #344b50;
	font-size: 15px;
}
.STYLE21 {
	font-size: 12px;
	color: #3b6375;
}
.STYLE22 {
	font-size: 12px;
	color: #295568;
}
</style>
</head>
<body>
		<h1 style="text-align: center">角色管理</h1>
	<form id="conditionForm"
		action="<%=request.getContextPath()%>/role/RoleServlet?command=list"
		method="post">
		状态：<select name="state">
			<option value="0">-全部-</option>
			<option value="1" <c:if test="${state == 1}">selected=selected</c:if>>启用</option>
			<option value="2" <c:if test="${state == 2}">selected=selected</c:if>>禁用</option>
		</select>
		<button>查询</button>
	</form>
	&nbsp; &nbsp; &nbsp;
	<table width="100%" border="1" align="center" bgcolor="#a8c7ce" cellpadding="0" cellspacing="0">
		<thead>
			<tr>
				<td colspan="8" align="right"><a
					href="<%=request.getContextPath()%>/role/RoleServlet?command=preadd&userName=${role.userName}">新增角色</a>
					&nbsp <a href="">角色授权</a></td>
			</tr>
			<tr>
		        <td width="4%" height="20" bgcolor="d3eaef" class="STYLE10"><div align="center">
		          <input type="checkbox" name="checkbox" id="checkbox" />
		        </div></td>
		        <td width="10%" height="25" bgcolor="d3eaef" class="STYLE1"><div align="center"><span class="STYLE10">角色名</span></div></td>
				<td width="15%" height="25" bgcolor="d3eaef" class="STYLE10"><div align="center"><span class="STYLE10">操作者</span></div></td>
		        <td width="24%" height="25" bgcolor="d3eaef" class="STYLE10"><div align="center"><span class="STYLE10">操作时间</span></div></td>
		        <td width="15%" height="25" bgcolor="d3eaef" class="STYLE10"><div align="center"><span class="STYLE10">状态</span></div></td>
		        <td width="16%" height="25" bgcolor="d3eaef" class="STYLE10"><div align="center"><span class="STYLE10">备注</span></div></td>
		        <td width="14%" height="25" bgcolor="d3eaef" class="STYLE10"><div align="center"><span class="STYLE10">操作</span></div></td>
     		 </tr>
		</thead>
		<c:forEach items="${roleList }" var="role" varStatus="v">
			<tr class="autoTr" bgcolor="#FFFFFF">
				<td height="20" bgcolor="d3eaef"><div align="center">
          <input type="checkbox" name="checkbox2" id="checkbox2" />
        </div></td>
				<td height="20" bgcolor="d3eaef" class="STYLE19" align="center">${role.name}</td>
				<td height="20" bgcolor="d3eaef" class="STYLE19" align="center">${role.userName}</td>
				<td height="20" bgcolor="d3eaef" class="STYLE19" align="center">${role.operate_time}</td>
				<td height="20" bgcolor="d3eaef" class="STYLE19" align="center" id="state${v.count}"><c:if test="${role.state == 1 }">
						<font color="green" id="state${role.id}">已启用</font>
					</c:if> <c:if test="${role.state == 2 }">
						<font color="red" id="state${role.id}">已禁用</font>
					</c:if></td>
				<td height="20" bgcolor="d3eaef" class="STYLE6" align="center">${role.memo}</td>
				<td height="20" bgcolor="d3eaef" class="STYLE6" align="center"><a href="<%=request.getContextPath() %>/role/RoleServlet?command=toGrant&id=${role.id}">授权</a> | <a href="<%=request.getContextPath()%>/role/RoleServlet?command=preUpdate&id=${role.id}">修改</a>
			| <a id="changeState${v.count }" href="javascript:;"
				onclick="updateState(${v.count}, ${role.id});"><c:if
							test="${role.state == 1 }">禁用</c:if> <c:if
							test="${role.state == 2 }">启用</c:if>
					</a>
				</td>
			</tr>
		</c:forEach>
	</table>
</body>
<script type="text/javascript">
function updateState(count,id){
	var xmlhttp;
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
		  var state=xmlhttp.responseText;
		  
		  var stateId = document.getElementById("state"+count);
		  var changeStateId = document.getElementById("changeState"+count);

		  if(state==1){
			  stateId.innerHTML = "已启用";
			  changeStateId.innerHTML = "禁用";
		  }else if(state==2){
			  stateId.innerHTML = "已禁用";
			  changeStateId.innerHTML = "启用";
		  }
		  
	    }
	  }
	xmlhttp.open("get","<%=request.getContextPath()%>/role/RoleServlet?command=changeState&id="+id,true);
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	xmlhttp.send();
}
</script>
</html>